JavaScript Ytelsesoptimalisering: Kodeoppdeling vs. Lat Evaluering

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    

      Loading...
}>
        
      
    

I dette eksemplet lastes OtherComponent bare når den gjengis. Mens den lastes, vil brukeren se meldingen "Laster...".

Verktøy for kodeoppdeling

• Webpack: En populær modulbunt som støtter forskjellige kodeoppdelingsteknikker.
• Rollup: En annen modulbunt som fokuserer på å lage små, effektive bunter.
• Parcel: En nullkonfigurasjonsbunt som automatisk håndterer kodeoppdeling.
• Vite: Et byggeverktøy som utnytter native ES-moduler for rask utvikling og optimaliserte produksjonsbygg.

Lat Evaluering: Utsette beregninger

Hva er lat evaluering?

Lat evaluering, også kjent som utsatt evaluering, er en programmeringsteknikk der evalueringen av et uttrykk utsettes til verdien faktisk er nødvendig. Med andre ord utføres beregninger bare når resultatene kreves, i stedet for å beregne dem ivrig på forhånd.

Tenk deg at du forbereder et fleretters måltid. Du ville ikke tilberedt hver rett på en gang. I stedet ville du forberedt hver rett bare når det er på tide å servere den. Lat evaluering fungerer på en lignende måte, og utfører beregninger bare når resultatene er nødvendige.

Hvordan lat evaluering fungerer

I JavaScript kan lat evaluering implementeres ved hjelp av forskjellige teknikker:

• Funksjoner: Å pakke et uttrykk inn i en funksjon lar deg utsette evalueringen til funksjonen kalles.
• Generatorer: Generatorer gir en måte å lage iteratorer som produserer verdier på forespørsel.
• Memoisering: Memoisering innebærer å bufre resultatene av dyre funksjonskall og returnere det bufrede resultatet når de samme inngangene oppstår igjen.
• Proxyer: Proxyer kan brukes til å fange opp tilgang til egenskaper og utsette beregningen av egenskapsverdier til de faktisk er åpnet.

Fordeler med lat evaluering

• Forbedret ytelse: Ved å utsette unødvendige beregninger, kan lat evaluering forbedre ytelsen betydelig, spesielt når du arbeider med store datasett eller komplekse beregninger.
• Redusert minnebruk: Lat evaluering kan redusere minnebruken ved å unngå opprettelse av mellomverdier som ikke er umiddelbart nødvendige.
• Økt respons: Ved å unngå unødvendige beregninger under innledende lasting, kan lat evaluering øke responsen til applikasjonen.
• Uendelige datastrukturer: Lat evaluering lar deg jobbe med uendelige datastrukturer, for eksempel uendelige lister eller strømmer, ved bare å beregne de nødvendige elementene på forespørsel.

Eksempel: Lat lasting av bilder

Et vanlig brukstilfelle for lat evaluering er lat lasting av bilder. I stedet for å laste inn alle bildene på en side på forhånd, kan du utsette lasting av bilder som ikke er synlige i visningsporten. Dette kan forbedre innledende sidelastetid betydelig og redusere forbruket av nettverksbåndbredde.

function lazyLoadImages() {
  const images = document.querySelectorAll('img[data-src]');
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });
  images.forEach((img) => {
    observer.observe(img);
  });
}

document.addEventListener('DOMContentLoaded', lazyLoadImages);

Dette eksemplet bruker IntersectionObserver API for å oppdage når et bilde kommer inn i visningsporten. Når et bilde er synlig, settes src-attributtet til verdien av data-src-attributtet, noe som utløser at bildet lastes inn. Observatøren avobserverer deretter bildet for å forhindre at det lastes inn igjen.

Eksempel: Memoisering

Memoisering kan brukes til å optimalisere dyre funksjonskall. Her er et eksempel:

function memoize(func) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    }
    const result = func(...args);
    cache[key] = result;
    return result;
  };
}

function expensiveCalculation(n) {
  // Simulate a time-consuming calculation
  for (let i = 0; i < 100000000; i++) {
    // Do something
  }
  return n * 2;
}

const memoizedCalculation = memoize(expensiveCalculation);

console.time('First call');
console.log(memoizedCalculation(5)); // First call - takes time
console.timeEnd('First call');

console.time('Second call');
console.log(memoizedCalculation(5)); // Second call - returns cached value instantly
console.timeEnd('Second call');

I dette eksemplet tar memoize-funksjonen en funksjon som inngang og returnerer en memoisert versjon av den funksjonen. Den memoiserte funksjonen bufrer resultatene av tidligere kall, slik at påfølgende kall med de samme argumentene kan returnere det bufrede resultatet uten å utføre den opprinnelige funksjonen på nytt.

Kodeoppdeling vs. Lat Evaluering: Viktige forskjeller

Mens både kodeoppdeling og lat evaluering er kraftige optimaliseringsteknikker, adresserer de forskjellige aspekter av ytelse:

• Kodeoppdeling: Fokuserer på å redusere den innledende buntstørrelsen ved å dele kode inn i mindre biter og laste dem inn på forespørsel. Den brukes primært til å forbedre innledende sidelastetid.
• Lat Evaluering: Fokuserer på å utsette beregningen av verdier til de faktisk er nødvendige. Den brukes primært til å forbedre ytelsen når du arbeider med dyre beregninger eller store datasett.

I hovedsak reduserer kodeoppdeling mengden kode som må lastes ned på forhånd, mens lat evaluering reduserer mengden beregning som må utføres på forhånd.

Når skal du bruke kodeoppdeling vs. lat evaluering

Kodeoppdeling

• Store applikasjoner: Bruk kodeoppdeling for applikasjoner med en stor mengde JavaScript-kode, spesielt de med flere ruter eller funksjoner.
• Forbedre innledende lastetid: Bruk kodeoppdeling for å forbedre innledende sidelastetid og redusere tiden til interaktiv.
• Redusere nettverksbåndbredde: Bruk kodeoppdeling for å redusere mengden data som må overføres over nettverket.

Lat Evaluering

• Dyre beregninger: Bruk lat evaluering for funksjoner som utfører dyre beregninger eller får tilgang til store datasett.
• Forbedre respons: Bruk lat evaluering for å forbedre responsen til applikasjonen ved å utsette unødvendige beregninger under innledende lasting.
• Uendelige datastrukturer: Bruk lat evaluering når du arbeider med uendelige datastrukturer, for eksempel uendelige lister eller strømmer.
• Lat lasting av media: Implementer lat lasting for bilder, videoer og andre medieaktiver for å forbedre sidelastetidene.

Kombinere kodeoppdeling og lat evaluering

I mange tilfeller kan kodeoppdeling og lat evaluering kombineres for å oppnå enda større ytelsesgevinster. Du kan for eksempel bruke kodeoppdeling til å dele applikasjonen din inn i mindre biter og deretter bruke lat evaluering til å utsette beregningen av verdier i disse bitene.

Tenk deg en e-handelsapplikasjon. Du kan bruke kodeoppdeling til å dele applikasjonen inn i separate bunter for produktoppføringssiden, produktdetaljsiden og kassesiden. Deretter, på produktdetaljsiden, kan du bruke lat evaluering til å utsette lasting av bilder eller beregningen av produktanbefalinger til de faktisk er nødvendige.

Utover kodeoppdeling og lat evaluering: Ytterligere optimaliseringsteknikker

Mens kodeoppdeling og lat evaluering er kraftige teknikker, er de bare to brikker i puslespillet når det gjelder JavaScript-ytelsesoptimalisering. Her er noen flere teknikker du kan bruke for å forbedre ytelsen ytterligere:

• Minifisering: Fjern unødvendige tegn (f.eks. mellomrom, kommentarer) fra koden din for å redusere størrelsen.
• Komprimering: Komprimer koden din ved hjelp av verktøy som Gzip eller Brotli for å redusere størrelsen ytterligere.
• Caching: Utnytt nettlesercaching og CDN-caching for å redusere antall forespørsler til serveren din.
• Tree Shaking: Fjern ubrukt kode fra buntene dine for å redusere størrelsen.
• Bildeoptimalisering: Optimaliser bilder ved å komprimere dem, endre størrelsen til de riktige dimensjonene og bruke moderne bildeformater som WebP.
• Debouncing og Throttling: Kontroller hastigheten som hendelsesbehandlere utføres med for å forhindre ytelsesproblemer.
• Effektiv DOM-manipulering: Minimer DOM-manipuleringer og bruk effektive DOM-manipuleringsteknikker.
• Web Workers: Overfør beregningstunge oppgaver til webarbeidere for å forhindre at de blokkerer hovedtråden.

Konklusjon

JavaScript-ytelsesoptimalisering er et avgjørende aspekt for å levere en positiv brukeropplevelse og oppnå forretningsmessige mål. Kodeoppdeling og lat evaluering er to kraftige teknikker som kan forbedre ytelsen betydelig ved å redusere innledende lastetider, redusere forbruket av nettverksbåndbredde og utsette unødvendige beregninger. Ved å forstå hvordan disse teknikkene fungerer og når du skal bruke dem, kan du lage raskere, mer responsive og mer fornøyelige webapplikasjoner.

Husk å vurdere de spesifikke applikasjonskravene dine og bruke teknikkene som er mest hensiktsmessige for dine behov. Overvåk kontinuerlig applikasjonens ytelse og gjenta optimaliseringsstrategiene dine for å sikre at du leverer den best mulige brukeropplevelsen. Omfavn kraften i kodeoppdeling og lat evaluering for å lage webapplikasjoner som ikke bare er funksjonsrike, men også performante og herlige å bruke, over hele verden.

Ytterligere læringsressurser

• Webpack-dokumentasjon: https://webpack.js.org/
• Rollup-dokumentasjon: https://rollupjs.org/guide/en/
• Vite-dokumentasjon: https://vitejs.dev/
• MDN Web Docs - Intersection Observer API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
• Google Developers - Optimize JavaScript Execution: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/